import React, { Component } from 'react'
import './App.css'
import Detail from './components/Detail'
import axios from 'axios'
class App extends Component {
  state = {
    list: [],
    visible: false,
    v: {}
  }
  handleClick(v) {
    // 打开弹框
    this.setState({
      visible: true,
      v: v
    })
  }
  handleClose() {
    this.setState({
      visible: false
    })
  }


  // React 生命周期


  // 挂载阶段 
  // 1. 一般在这里进行 state 初始化  
  //    也可以在这里绑定函数的this指向
  constructor() {
    super()
    console.group('constructor生命周期')
    console.log(1);
    console.groupEnd('constructor生命周期')
  }

  // 2. 这个函数必须实现的一个生命周期
  render() {
    const { list, visible, v } = this.state
    console.group('render 声明周期开始')
    console.log(2);
    console.groupEnd('render 声明周期结束')
    return <div>
      {
        list.map(v => {
          return (
            <dl key={v.id} onClick={() => this.handleClick(v)}>
              <dt><img src={v.url} alt="" /></dt>
              <dd>
                <h3>{v.title}</h3>
                <p>{v.desc}</p>
              </dd>
            </dl>
          )
        })
      }

      <div style={{
        display: visible ? 'block' : 'none',
        position: 'fixed',
        left: 0,
        top: 0,
        width: '100vw',
        height: '100vh',
        background: 'rgba(0,0,0,.6)'
      }}
        onClick={() => this.handleClose()}
      >
        <div className="content">
          <Detail title={v.title} url={v.url} desc={v.desc}></Detail>
        </div>
      </div>
    </div>
  }
  // 3. 该生命周期执行的时候， 页面已经加载渲染完毕
  //  一般在这里发起ajax 或者  dom操作
  componentDidMount() {
    console.group('componentDidMount 声明周期开始')
    axios.get('/api/list').then(resp => {
      this.setState({
        list: resp.data.data
      })
    })
    console.groupEnd('componentDidMount 声明周期结束')
  }
  // 下述生命周期方法即将过时，在新代码中应该避免使用它们：
  // componentWillMount

  // 更新阶段

  // 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
  // 默认行为是 state 每次发生变化组件都会重新渲染。
  shouldComponentUpdate(nextPorps, nextState) {
    console.log(nextPorps, nextState);
    console.log(this.props, this.state);
    return true
  }
  // componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
  // 当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。
  componentDidUpdate(prevProps, prevState) {
    console.log('-----------------------------------------------------');
    console.log(prevProps, prevState);
    console.log(this.props, this.state);
  }
  // 下述方法即将过时，在新代码中应该避免使用它们：
  // componentWillUpdate()
  // componentWillReceiveProps()


  // 卸载阶段
  componentWillUnmount() {
    
  }

}



export default App

